<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*
        1. get()方法的三个参数
            - 目标对象  target
            - 要查询的属性 property
            - 代理对象  proxy
     */

    const target = {
        foo: 'bar'
    }

    const handler = {
        // 1.基本
        /*     get(trapTarget, property, receiver) {
                 console.log(trapTarget === target)  // true
                 console.log(property)           // foo
                 console.log(receiver === proxy) // true
                 console.log('proxy',receiver)
             },*/
        // 重构get的行为-1
        // get(trapTarget, property, receiver){
        //     return trapTarget[property]
        // }

        // 使用Reflect.get(...arguments) -2
        /*   get(){
               return Reflect.get(...arguments)
           },*/

        // 简写模式 -3
        get: Reflect.get
    }
    const proxy = new Proxy(target, handler);
    console.log(proxy.foo)


    /*
        2.终极简写
            - 如果真想创建一个可以捕获所有方法，然后将每个方法转发给对应反射 API 的空代理，那 么甚至不需要定义处理程序对象
     */
    console.log('---2---')
    const target2 = {
        foo: 'bar'
    }
    const proxy2 = new Proxy(target2, Reflect)
    console.log(target2.foo)
    console.log(proxy2.foo)

    /*
        3.举例应用
     */

    console.log('---3---')
    const target3 = {
        foo: 'bar',
        baz: 'qux'
    }
    const handler3 = {
        get(trapTarget, property, receiver) {
            let decoration = '';
            if (property === 'foo') {
                decoration = '!!!'
            }
            return Reflect.get(...arguments) + decoration
        }
    }
    const proxy3 = new Proxy(target3, handler3)
    console.log(proxy3.foo) // bar!!!
    console.log(target3.foo) // bar
    console.log(proxy3.baz) // qux
    console.log(target3.baz)// qux
</script>
</body>
</html>